<!--  -->
<template>
    <div class="form-wrap" ref="wrap">
        <div class="form-button-wrap">
            <template v-for="(item, index) in buttons">
                <qt-button
                    :key="index"
                    :size="item.size"
                    :icon="item.prefixIcon"
                    :buttonName="item.name"
                    @click="_.isFunction(item.callback) ? item.callback() : null"
                ></qt-button>
            </template>
        </div>
        <div class="form-content-wrap" :style="{height: height+'px'}">
            <el-form
                ref="ruleForm"
                label-width="110px"
                label-position="right"
                :model="formValue"
                :rules="formRules"
            >
                <template v-for="(item, index) in formTemplate">
                    <el-form-item
                        :key="index"
                        :size="item.size"
                        :label="item.labelName"
                        :prop="item.ruleName"
                        :label-width="item.labelWidth"
                    >
                        <qt-input
                            v-if="item.type === 'input'"
                            :fildeName="item.fildeName"
                            :placeholder="item.placeholder"
                            :clearable="item.clearable"
                            :disabled="item.disabled"
                            v-model="formValue[item.fildeName]"
                            @change="handleFormChange"
                        />
                        <qt-number
                            v-if="item.type === 'number'"
                            :fildeName="item.fildeName"
                            :placeholder="item.placeholder"
                            :disabled="item.disabled"
                            v-model="formValue[item.fildeName]"
                            @change="handleFormChange"
                        />
                        <qt-select
                            v-if="item.type === 'select'"
                            :fildeName="item.fildeName"
                            :placeholder="item.placeholder"
                            :multiple="item.multiple"
                            :clearable="item.clearable"
                            :disabled="item.disabled"
                            v-model="formValue[item.fildeName]"
                            @change="handleFormChange"
                        />
                        <qt-select
                            v-else-if="item.type === 'multipleSelect'"
                            :fildeName="item.fildeName"
                            :placeholder="item.placeholder"
                            :multiple="item.multiple"
                            :clearable="item.clearable"
                            :disabled="item.disabled"
                            v-model="formValue[item.fildeName]"
                            @change="handleFormChange"
                        />
                        <qt-date
                            v-else-if="item.type === 'date'"
                            :type="item.type"
                            :fildeName="item.fildeName"
                            :placeholder="item.placeholder"
                            :clearable="item.clearable"
                            :disabled="item.disabled"
                            :readonly="item.readonly"
                            :defaultValue="item.defaultValue"
                            :isShowOptions="item.isShowOptions"
                            v-model="formValue[item.fildeName]"
                            @change="handleFormChange"
                        />
                        <qt-date
                            v-else-if="item.type === 'daterange'"
                            :type="item.type"
                            :fildeName="item.fildeName"
                            :placeholder="item.placeholder"
                            :startPlaceholder="item.startPlaceholder"
                            :endPlaceholder="item.endPlaceholder"
                            :clearable="item.clearable"
                            :disabled="item.disabled"
                            :readonly="item.readonly"
                            :defaultValue="item.defaultValue"
                            :isShowOptions="item.isShowOptions"
                            v-model="formValue[item.fildeName]"
                            @change="handleFormChange"
                        />
                        <qt-textarea
                            v-if="item.type === 'textarea'"
                            :fildeName="item.fildeName"
                            :placeholder="item.placeholder"
                            :clearable="item.clearable"
                            :disabled="item.disabled"
                            v-model="formValue[item.fildeName]"
                            @change="handleFormChange"
                        />
                    </el-form-item>
                </template>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'qtForm',

    props: {
        buttons: {
            type: Array
        },
        formTemplate: {
            type: Array
        },
        formValue: {
            type: Object
        },
        formRules: {
            type: Object
        }
    },

    data() {
        return {
            height: null
        };
    },

    activated() {
        if (this.$refs.wrap.offsetHeight - 70 !== this.height) {
            this.initHeight();
        }
    },

    mounted() {
        this.initHeight();

        window.addEventListener(
            'resize',
            this._.throttle(this.initHeight, 500, {
                leading: true,
                trailing: true
            }),
            false
        );
    },

    destroyed() {
        window.removeEventListener('resize', this.initHeight, false);
    },

    methods: {
        buttonClick(funName) {
            this[funName] && this[funName]();
        },

        handleFormChange(value, fildeName) {
            this.$emit('change', value, fildeName);
        },

        submitForm() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },

        initHeight() {
            this.$nextTick(() => {
                const getHeight = () => {
                    return new Promise(resolve => {
                        if (this.$refs.wrap) {
                            resolve(this.$refs.wrap.offsetHeight - 70);
                        }
                    });
                };
                getHeight().then(value => {
                    this.height = value;
                });
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.form-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    .form-button-wrap {
        margin-bottom: 10px;
        text-align: right;
    }
    .form-content-wrap {
        padding: 20px;
        background: #fff;
        overflow-y: scroll;
    }
}
.el-form {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.el-form-item {
    width: 50%;
}
.el-input,
.el-select,
.el-date-editor,
.el-input-number,
.el-date-editor.el-input,
.el-range-editor.el-input__inner {
    width: 100%;
}
::v-deep .el-date-editor .el-range-separator {
    width: auto;
    padding: 0 2px;
}

@media only screen and (min-width: 768px) {
    .el-form-item {
        width: 50%;
    }
}
@media only screen and (min-width: 1024px) {
    .el-form-item {
        width: 33.33333%;
    }
}
@media only screen and (min-width: 1600px) {
    .el-form-item {
        width: 25%;
    }
}
</style>
